<template>
    <div class="merchant-detail">
        <!-- 顶部导航栏 -->
        <van-sticky>
            <van-nav-bar 
                left-arrow 
                @click-left="onClickLeft" 
                :border="false"
                class="custom-nav">
                <template #right>
                    <div class="nav-icons">
                        <van-icon name="search" size="20" />
                        <van-icon name="star-o" size="20" />
                        <van-icon name="share-o" size="20" />
                        <van-icon name="ellipsis" size="20" />
                    </div>
                </template>
            </van-nav-bar>
        </van-sticky>

        <!-- 商家头部信息 -->
        <div class="merchant-header">
            <div class="merchant-banner">
                <img :src="merchant.banner" alt="商家横幅" class="banner-image" />
                <div class="merchant-basic-info">
                    <div class="merchant-left">
                        <img :src="merchant.avatar" alt="商家头像" class="merchant-avatar" />
                    </div>
                    <div class="merchant-right">
                        <h2 class="merchant-name">{{ merchant.name }}</h2>
                        <div class="merchant-rating">
                            <span class="rating-text">评价未达星级计算标准暂无评分</span>
                            <span class="per-person">¥{{ merchant.avgPrice }}/人</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 营业状态和地址信息 -->
        <div class="business-info">
            <div class="business-status">
                <span class="status-open">营业中</span>
                <span class="business-hours">{{ merchant.businessHours }}</span>
                <span class="tag new-store">新店</span>
                <span class="tag bookable">可预订</span>
                <span class="tag">明厨亮灶</span>
                <span class="tag">无烟餐厅</span>
                <van-icon name="arrow" class="detail-arrow" />
            </div>
            
            <div class="address-info">
                <div class="address-text">
                    <span class="address">{{ merchant.address }}</span>
                    <van-icon name="arrow" class="address-arrow" />
                </div>
                <div class="distance-info">
                    <span class="distance">距您{{ merchant.distance }}公里</span>
                    <span class="travel-time">骑行{{ merchant.rideTime }}分钟</span>
                    <span class="travel-time">步行{{ merchant.walkTime }}分钟</span>
                </div>
                <div class="action-buttons">
                    <div class="action-btn">
                        <van-icon name="logistics" size="24" />
                        <span>打车</span>
                    </div>
                    <div class="action-btn">
                        <van-icon name="phone-o" size="24" />
                        <span>电话</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 神券膨胀 -->
        <div class="coupon-section">
            <div class="coupon-header">
                <span class="coupon-tag hot">神券</span>
                <span class="coupon-title">最高膨胀至50</span>
                <span class="coupon-tag expand">膨胀</span>
                <span class="coupon-all">全部 ></span>
            </div>
        </div>

        <!-- 选项卡 -->
        <van-tabs v-model:active="activeTab" class="custom-tabs">
            <van-tab title="团购" name="groupon">
                <!-- 推荐标签 -->
                <div class="recommend-section">
                    <div class="recommend-header">
                        <van-icon name="fire-o" color="#ff6600" />
                        <span class="recommend-title">推荐</span>
                        <span class="sub-title">推荐</span>
                        <span class="promotion-text">到店团购3.4折起</span>
                    </div>
                </div>

                <!-- 团购商品列表 -->
                <div class="groupon-list">
                    <div v-for="(item, index) in grouponItems" :key="item.id" class="groupon-item">
                        <div class="item-left">
                            <div class="item-tag" v-if="item.tag">{{ item.tag }}</div>
                            <img :src="item.image" :alt="item.name" class="item-image" />
                        </div>
                        <div class="item-content">
                            <h3 class="item-title">{{ item.name }}</h3>
                            <div class="item-subtitle">{{ item.subtitle }}</div>
                            <div class="item-sales">半年售 {{ item.sales }}万+</div>
                            <div class="item-desc" v-if="item.desc">"{{ item.desc }}"</div>
                            <div class="item-price">
                                <span class="current-price">¥{{ item.price }}</span>
                                <span class="discount" v-if="item.discount">{{ item.discount }}折</span>
                                <span class="original-price" v-if="item.originalPrice">¥{{ item.originalPrice }}</span>
                            </div>
                        </div>
                        <div class="item-right">
                            <van-button type="primary" size="small" class="buy-btn">抢购</van-button>
                        </div>
                    </div>
                </div>
            </van-tab>
            
            <van-tab title="评价" name="reviews">
                <div class="reviews-content">
                    <p>暂无评价</p>
                </div>
            </van-tab>
            
            <van-tab title="更多推荐" name="more">
                <div class="more-content">
                    <p>更多推荐内容</p>
                </div>
            </van-tab>
        </van-tabs>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'

const router = useRouter()

// 商家信息
const merchant = ref({
    name: '华莱士·全鸡汉堡(盛世华庭店)',
    avatar: 'https://img.yzcdn.cn/vant/cat.jpeg',
    banner: 'https://img.yzcdn.cn/vant/apple-1.jpg',
    rating: 4.5,
    avgPrice: 16,
    businessHours: '09:00-22:00',
    address: '新建区长堎街道嘉轩路桃苑小区599号-1、-3、-4号',
    distance: '1.1',
    rideTime: '8',
    walkTime: '15'
})

// 团购商品数据
const grouponItems = ref([
    {
        id: 1,
        image: 'https://img.yzcdn.cn/vant/apple-1.jpg',
        name: '【买一送一】香辣鸡排堡',
        subtitle: '半年售 2.9万+',
        desc: '[性价比]超级划算哦"',
        price: 9.9,
        originalPrice: 19.8,
        discount: '5折',
        sales: '2.9',
        tag: '神券'
    },
    {
        id: 2,
        image: 'https://img.yzcdn.cn/vant/apple-2.jpg',
        name: '【热卖爆款】两堡一卷(含牛堡)',
        subtitle: '半年售 175万+',
        price: 17.8,
        originalPrice: 38,
        discount: '4.7折',
        sales: '175',
        tag: '热卖'
    },
    {
        id: 3,
        image: 'https://img.yzcdn.cn/vant/apple-3.jpg',
        name: '【加倍不加价】加量组合十件套',
        subtitle: '半年售 300万+',
        price: 29.9,
        originalPrice: 76,
        discount: '4折',
        sales: '300',
        tag: '爆款'
    },
    {
        id: 4,
        image: 'https://img.yzcdn.cn/vant/apple-1.jpg',
        name: '【3+4随心享】7重暴击炸鸡盛宴',
        subtitle: '半年售 120万+',
        price: 39.9,
        originalPrice: 98,
        discount: '4折',
        sales: '120',
        tag: '新品'
    }
])

// 状态管理
const activeTab = ref('groupon')

// 方法
const onClickLeft = () => {
    history.back()
}

const buyGroupon = (item: any) => {
    // 跳转到订单确认页面
    router.push('/order-confirm')
}
</script>

<style scoped>
.merchant-detail {
    background: #f5f5f5;
    min-height: 100vh;
}

/* 顶部导航栏 */
.custom-nav {
    background: white;
    border-bottom: 1px solid #eee;
}

.nav-icons {
    display: flex;
    gap: 15px;
    align-items: center;
}

/* 商家头部信息 */
.merchant-header {
    background: white;
    margin-bottom: 10px;
}

.merchant-banner {
    position: relative;
    height: 120px;
    overflow: hidden;
}

.banner-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.merchant-basic-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 15px;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    color: white;
}

.merchant-left {
    flex-shrink: 0;
}

.merchant-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 2px solid white;
}

.merchant-right {
    flex: 1;
    margin-left: 15px;
}

.merchant-name {
    margin: 0 0 5px 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
}

.merchant-rating {
    display: flex;
    align-items: center;
    color: white;
}

.rating-text {
    font-size: 12px;
    margin-right: 10px;
}

.per-person {
    font-size: 12px;
}

/* 营业状态和地址信息 */
.business-info {
    background: white;
    margin-bottom: 10px;
    padding: 15px;
}

.business-status {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    flex-wrap: wrap;
    gap: 5px;
}

.status-open {
    background: #4cd964;
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
}

.business-hours {
    font-size: 12px;
    color: #666;
    margin-right: 10px;
}

.tag {
    background: #f5f5f5;
    color: #666;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 10px;
}

.detail-arrow {
    color: #999;
    margin-left: 5px;
}

.address-info {
    margin-bottom: 15px;
}

.address-text {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.address {
    font-size: 14px;
    color: #333;
    flex: 1;
}

.address-arrow {
    color: #999;
    margin-left: 5px;
}

.distance-info {
    display: flex;
    gap: 10px;
    font-size: 12px;
    color: #666;
}

.action-buttons {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.action-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}

.action-btn:hover {
    background: #f5f5f5;
}

/* 神券膨胀 */
.coupon-section {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
}

.coupon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
}

.coupon-tag {
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: bold;
}

.hot {
    background: #ff4444;
    color: white;
}

.expand {
    background: #ff6600;
    color: white;
}

.coupon-title {
    color: #333;
    font-weight: bold;
}

.coupon-all {
    color: #999;
    font-size: 12px;
}

/* 选项卡 */
.custom-tabs {
    background: white;
}

.van-tabs__nav {
    background: white;
    border-bottom: 1px solid #eee;
}

.van-tabs__line {
    background: #ff6600;
}

.van-tab__title {
    font-size: 16px;
    color: #333;
}

.van-tab__title--active {
    color: #ff6600;
    font-weight: bold;
}

/* 推荐部分 */
.recommend-section {
    background: white;
    padding: 15px;
    margin-bottom: 10px;
}

.recommend-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.recommend-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.sub-title {
    font-size: 14px;
    color: #666;
    margin-left: 10px;
}

.promotion-text {
    font-size: 12px;
    color: #999;
}

/* 团购商品列表 */
.groupon-list {
    background: white;
    margin-bottom: 10px;
}

.groupon-item {
    display: flex;
    padding: 15px;
    border-bottom: 1px solid #eee;
    transition: all 0.3s;
}

.groupon-item:last-child {
    border-bottom: none;
}

.item-left {
    flex-shrink: 0;
    margin-right: 15px;
}

.item-tag {
    background: #ff6600;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-bottom: 5px;
    display: inline-block;
}

.item-image {
    width: 80px;
    height: 80px;
    border-radius: 8px;
    object-fit: cover;
}

.item-content {
    flex: 1;
}

.item-title {
    margin: 0 0 5px 0;
    font-size: 16px;
    font-weight: bold;
    color: #333;
}

.item-subtitle {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.item-sales {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.item-desc {
    font-size: 12px;
    color: #666;
    margin-bottom: 10px;
}

.item-price {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.current-price {
    font-size: 16px;
    color: #ff6600;
    font-weight: bold;
    margin-right: 5px;
}

.discount {
    background: #ff6600;
    color: white;
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
}

.original-price {
    font-size: 12px;
    color: #999;
    text-decoration: line-through;
}

.item-right {
    flex-shrink: 0;
    margin-left: 15px;
}

.buy-btn {
    width: 60px;
    height: 30px;
    background: #ff6600;
    color: white;
    border-radius: 15px;
    font-size: 12px;
    padding: 0;
    border: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.buy-btn:hover {
    background: #e65a00;
}

/* 评价和更多推荐 */
.reviews-content, .more-content {
    padding: 15px;
    background: white;
    margin-bottom: 10px;
}

.reviews-content p, .more-content p {
    text-align: center;
    color: #999;
    font-size: 14px;
}
</style>